<template>
    <div class="realtimestatus">
        <div class="swich">
            <el-checkbox v-model="checked">显示故障设备图标</el-checkbox>
            <el-checkbox v-model="checkeds">显示溢满设备图标</el-checkbox>
            <!-- <input type="text" name="" id="" placeholder=> -->
        </div>
        <div class="baidumap" id="allmap" style="position: relative"></div>
         <el-table :data="tableData" stripe class='table'>
            <el-table-column
            prop="address"
            label="单位"
            width="150">
            </el-table-column>
            <el-table-column
            prop="name"
            label="户主">
            </el-table-column>
            <el-table-column
            prop="weight"
            label="投放重量">
            </el-table-column>
            <el-table-column
            prop="type"
            label="投放种类">
            </el-table-column>
            <el-table-column
            prop="date"
            label="投放时间"
            width="150">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import open from '@/assets/img/openimg.png'
import lajitong from '@/assets/img/closeimg.png'
import fill from '@/assets/img/fill.png'
import '../../assets/css/common.css'
export default {
  map: null,
  name: 'Bmap',
  components: {

  },
  data () {
    return {
       data: [{
          longitude: '117.192195',
          latitude: '39.087718',
          sumPerson: 133,
          sumBuilding: 85,
          sumHome: 85,
          label: '环湖南里社区',
          children: [{
            longitude: '117.193333',
            latitude: '39.086894',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '环湖南里'
          }, {
            longitude: '117.188724',
            latitude: '39.087835',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '环湖西里'
          }, {
            longitude: '117.189481',
            latitude: '39.088219',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '蔚蓝轩'
          }, {
            longitude: '117.194566',
            latitude: '39.086563',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '梧桐大厦'
          }, {
            longitude: '117.188429',
            latitude: '39.088565',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '新金龙大厦'
          }, {
            longitude: '117.190529',
            latitude: '39.088086',
            sumPerson: 133,
            sumBuilding: 85,
            sumHome: 85,
            label: '环湖里'
          }]
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '气象南里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '环湖东里社区',
          detail: '总楼数：32\n总户数：2040\n实住人数：6080',
          children: [{
            longitude: '117.191866',
            latitude: '39.087246',
            label: '环湖东里'
          }, {
            longitude: '117.191866',
            latitude: '39.087246',
            label: '环湖北里'
          }, {
            longitude: '117.191866',
            latitude: '39.087246',
            label: '华昌大厦'
          }]
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水北里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水东里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水西里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '宾水南里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '育贤里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '高风里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '天资里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '富源里社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '国风园社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '体院宿舍社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '立达博兰社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '五一阳光社区'
        }, {
          longitude: '117.191866',
          latitude: '39.087246',
          label: '紫金里社区'
        }],
            tableData: [{
                date: '2020-08-18 09:54',
                name: '刘婧',
                address: '集贤里3号楼1门',
                weight:'567g',
                type:'可回收垃圾'
                }, {
                date: '2020-08-18 08:46',
                name: '王勇',
                address: '集贤里5号楼3门',
                weight:'482g',
                type:'可回收垃圾'
                }, {
                date: '2020-08-18 08:42',
                name: '张秀琳',
                address: '集贤里17号楼1门',
                weight:'350g',
                type:'可回收垃圾'
                }, {
                date: '2020-08-18 08:17',
                name: '刘静',
                address: '集贤里13号楼3门',
                weight:'476g',
                type:'可回收垃圾'
            }],
      websock: null,
      map: null,
      txt: '',
      label: '',
      myIcon:'',
      // checkeds:true
    }
  },
  created () {
    this.initWebSocket();
    this.play();
  },
  mounted () {
    this.InitMap()
  },
  destroyed () {
    this.websock.close() //�뿪·��֮��Ͽ�websocket����
  },
  methods: {
    initWebSocket () { //��ʼ��weosocket
      //   const wsuri = "ws://192.168.1.113:9946";
      const wsuri = "ws://111.160.78.62:9946";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen () { 
      let actions = { "test": "12345" };
      this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror () {
      this.initWebSocket();
    },
    websocketonmessage (e) { 
// debugger;
      const redata = JSON.parse(e.data);
      // var datas = JSON.parse(redata)
      // console.log(datas)
     var id = JSON.parse(redata).deviceID.toLowerCase();
     var me = this;
     console.log(JSON.parse(redata).state == 0)
     console.log(JSON.parse(redata).data)
    //  if(JSON.parse(redata).cmd == 'sendGarbagebinOpenStatuUp'){}
       if(JSON.parse(redata).data.state == 1){
         this.myIcon = new BMap.Icon(open, new BMap.Size(48, 48));
         this.label = new BMap.Label('开盖', { offset: new BMap.Size(40, -10) });
       }else if(JSON.parse(redata).data.full == 1){
         this.myIcon = new BMap.Icon(fill, new BMap.Size(48, 48));
         this.label = new BMap.Label('溢满', { offset: new BMap.Size(40, -10) });
       }else{
         this.myIcon = new BMap.Icon(lajitong, new BMap.Size(48, 48));
         this.label = new BMap.Label('关盖', { offset: new BMap.Size(40, -10) });
       }
    //  else if(JSON.parse(redata).cmd == 'sendGarbagebinStatuInfo'){
       
    //  }
    //  if(){
       
    //  }else  else{
       
    //  }
      console.log(this.label,this.myIcon)
      // console.log(redata);
      // console.log(me.data[id])
      me.data[id].chargerMarker.setIcon(this.myIcon);
      // label.setStyle({ display: "none" });
      me.data[id].chargerMarker.setLabel(this.label);
    },
    websocketsend (Data) {
      this.websock.send(Data);
    },
    websocketclose (e) {  //�ر�
      console.log('�Ͽ�����', e);
    },
    InitMap () {
      this.map = new BMap.Map('allmap')

      var point = new BMap.Point(117.612137, 39.043002) 
      this.map.centerAndZoom(point, 12) 
      this.map.enableScrollWheelZoom(true)

      this.map.addControl(new BMap.NavigationControl())
      this.map.addControl(new BMap.ScaleControl())
      this.map.addControl(new BMap.OverviewMapControl())
      this.map.addControl(new BMap.MapTypeControl())


      // var marker = new window.BMap.Marker(point) // ������ע
      // // map.addOverlay(marker) // ����ע���ӵ���ͼ��
      // const myIcon = new BMap.Icon(lajitong, new BMap.Size(48, 48))
      // const marker2 = new BMap.Marker(point, { icon: myIcon })
      // this.map.addOverlay(marker2)
      this.$axios({
        // url: 'http://localhost:6607/GarbagePointsApi/BasicData/GetRubbishBoxApi',
        url: 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/GetRubbishBoxApi',
        method: 'get'
      }).then((res) => {
        // debugger
        this.showPoint(res);
      }).catch((error) => {

      })
    },
    baiduMap () {
      var map = new BMap.Map('allmap')

      var point = new BMap.Point(117.612137, 39.043002) 
      map.centerAndZoom(point, 19)
      map.enableScrollWheelZoom(true) 
      // var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
      // map.addControl(scaleCtrl);
      // var zoomCtrl = new BMapGL.ZoomControl(15);  // 添加比例尺控件
      // map.addControl(zoomCtrl);
      map.setMapStatus(MapStatusUpdateFactory.zoomTo(20));
      map.addControl(new BMap.NavigationControl())
      map.addControl(new BMap.ScaleControl())
      map.addControl(new BMap.OverviewMapControl())
      map.addControl(new BMap.MapTypeControl())
      //map.setMapStyle({ style: 'midnight' }) 

      var marker = new window.BMap.Marker(point) 
      // map.addOverlay(marker) 
      const myIcon = new BMap.Icon(lajitong, new BMap.Size(48, 48))
      const marker2 = new BMap.Marker(point, { icon: myIcon })
      map.addOverlay(marker2)
      // var infoWindow = new BMap.InfoWindow('������ʾ��Ϣ')
      // marker.addEventListener('mouseover', function () {
      //   this.openInfoWindow(infoWindow)
      // })

      // marker.addEventListener('mouseout', function () {
      //   //this.closeInfoWindow(infoWindow)
      // })
    },
    async showPoint (data) {
      this["data"] = {};
      this.map.clearOverlays()
      data.data.forEach(item => {
        // debugger
        this['data'][item.ID] = item
        this.addMark(item)
      })
    },
    addMark (data) {
      var me = this;
      var label;
      var point = new BMap.Point(data.LONGITUDE, data.LATITUDE);    
      var marker = new BMap.Marker(point, { icon: new BMap.Icon(lajitong, new BMap.Size(48, 48)) });  
      label = new BMap.Label('关盖', { offset: new BMap.Size(40, -10) }); 
      // label.setStyle({ display: "none" });    
      marker.setLabel(label);  
      marker.setTitle(data.name); 
      me.map.addOverlay(marker);  
      data["chargerMarker"] = marker; 
    },
     change() {
            //change、paly表格数据动态滚动
            this.tableData.push(this.tableData[0]);//把第一条数据插入数组最有一条
            this.tableData.shift();//删除数组中第一条数据

        },

        play(){
            setInterval(this.change,2000)
        },
  }
}
</script>
<style scoped>
.realtimestatus,body{
       width: 100%;
       height: 100%;
       position: relative;
       box-sizing: border-box;
}
.baidumap {
    width: 100%;
    height: 100%;
    border: 2px solid #9A9A9A;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
.baidumap > .BMap_cpyCtrl {
    display: none !important;
}
.baidumap > .anchorBL {
    display: none !important;
}
.table{
       font-size: 15px;
       position:absolute;
       right: 10px;
       bottom: 5px;
       z-index: 555;
       width: 640px;
       height: 220px;
       opacity: 0.9;
       background: #fff;
   }
</style>




